<%--
  Created by IntelliJ IDEA.
  User: eeesys
  Date: 2017/6/22
  Time: 15:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加量表</title>
    <link  href="../../images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="../../css/txzj/create.css?cache=<%=Math.random()%>"/>
    <%--<script src="../../js/txzj/vue.min.js"></script>--%>
    <script src="../../js/jquery-1.9.1.min.js"></script>
    <style>
        .right_cont {
            background: #fff!important;
        }
    </style>
</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <div class="message_hos_news_container">
            <!--右边导航下面内容-->
            <div class="right_cont_container">
                <%--这里面写正文内容--%>
                <div class="box">
                <div id="container">
                    <%--最上边一栏--%>
                    <div class="title">
                        <div class="title-text">创建量表</div>
                        <div class="back">返回</div>
                    </div>
                    <%--两个input框--%>
                    <div class="input-box">
                        <div class="input name">
                            <div class="left"><span>*</span>量表标题</div>
                            <div class="right">
                                <input type="text" placeholder="请输入量表标题">
                            </div>
                        </div>
                        <div class="input discribe">
                            <div class="left"><span>*</span>量表描述</div>
                            <div class="right">
                                <textarea placeholder="请输入量表描述"></textarea>
                            </div>
                        </div>
                    </div>
                    <%--选项卡一栏--%>
                    <div class="card-box">
                        <div class="card-title">创建量表题目</div>
                        <div class="card-item" @click="openOneadd()"><span>单选题</span></div>
                        <div class="card-item"><span>多选题</span></div>
                        <div class="card-item"><span>填空题</span></div>
                        <div class="card-item"><span>打分题</span></div>
                    </div>
                    <%--题目box--%>
                    <div class="questionnaire-box" v-for="i in 2">
                        <!--这是单选题-->
                        <div class="questionnaire-item radio">
                            <div class="questionnaire-title">
                                1.主观题（单选题）
                            </div>
                            <div class="questionnaire-answer-box">
                                <label for="a">
                                    <input type="radio" id="a" name="haha">this is a
                                </label>
                                <label for="b">
                                    <input type="radio" id="b" name="haha">this is b
                                </label>
                                <label for="c">
                                    <input type="radio" id="c" name="haha">this is c
                                </label>
                            </div>
                            <div class="operate">
                                <img src="../../images/be_up.png" alt="上移">
                                <img src="../../images/be_down.png" alt="下移">
                                <span>编辑</span>
                                <span>删除</span>
                            </div>
                        </div>
                        <!--这是多选题-->
                        <div class="questionnaire-item checkbox">
                            <div class="questionnaire-title">
                                2.主观题（多选题）
                            </div>
                            <div class="questionnaire-answer-box">
                                <label for="d">
                                    <input type="checkbox" id="d" name="hehe">this is d
                                </label>
                                <label for="e">
                                    <input type="checkbox" id="e" name="hehe">this is e
                                </label>
                                <label for="f">
                                    <input type="checkbox" id="f" name="hehe">this is f
                                </label>
                            </div>
                            <div class="operate">
                                <img src="../../images/be_up.png" alt="上移">
                                <img src="../../images/be_down.png" alt="下移">
                                <span>编辑</span>
                                <span>删除</span>
                            </div>
                        </div>
                        <!--这是填空题-->
                        <div class="questionnaire-item">
                            <div class="questionnaire-title">
                                3.主观题（填空题）
                            </div>
                            <div class="questionnaire-answer-box">
                                <textarea name="text"></textarea>
                            </div>
                            <div class="operate">
                                <img src="../../images/be_up.png" alt="上移">
                                <img src="../../images/be_down.png" alt="下移">
                                <span>编辑</span>
                                <span>删除</span>
                            </div>
                        </div>
                    </div>
                    <%--下面是保存按钮--%>
                    <div class="save"><span>保存</span></div>

                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<%--从这里开始写组件--%>
<addcheck :show.sync="show">

</addcheck>

<template id="addcheck">
    <div class="dialogs">
        <div class="dialog" v-bind:class="{ 'dialog-active': show }">
            <div class="dialog-content">
                <header class="dialog-header">
                    <div class="dialog-title">添加单选题</div>
                </header>
                <div class="dialog-body">
                    <%--slot--%>
                    <choice-slot>


                    </choice-slot>
                </div>
                <div class="dialog-footer">
                    <div class="make-sure" @click="close()">保存</div>
                </div>


            </div>
        </div>
        <div class="dialog-overlay"></div>
    </div>
</template>
<template id="choice-slot">
    <%--选择题--%>
    <div class="choice">
        <div class="choice-title">
            <div class="choice-title-row">
                <div class="row-left"><span>*</span>问题标题</div>
                <div class="row-right">
                    <textarea></textarea>
                </div>
            </div>

        </div>
    </div>
</template>
</body>
<script>
    //注册组件，这个后面要挪到组件文件夹中去
    var addcheck = {
        template: '#addcheck',
        props: ['show'],
        components: {
            'choice-slot': {
                template: '#choice-slot'
            }
        },
        methods: {
            close: function(){
                this.show = false
            }
        }
    }

    //实例化
    var vm = new Vue({
        el: 'body',
        data: {
            show : true
        },
        methods: {
            openOneadd: function() {
                this.show = true;
            }
        },
        components: {
            addcheck: addcheck,
        }
    })
</script>

</html>
